import React from 'react';
import { findDOMNode } from 'react-dom';
import { connect } from 'react-redux';

import Card from 'material-ui/lib/card/card';
import CardActions from 'material-ui/lib/card/card-actions';
import CardHeader from 'material-ui/lib/card/card-header';
import CardText from 'material-ui/lib/card/card-text';

import * as dashboardStyle from './Dashboard.less';

class Dashboard extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        let domNode = findDOMNode(this.refs.markdownPanel);
        fetch('/api/changelog')
            .then((res) => {
                return res.text();
            })
            .then((html) => {
                domNode.innerHTML = html; 
            })
            .catch((err) => {
                console.log(err);
            });
    }

    render() {
        return (
            <div className={dashboardStyle.dashboard}>
                <div>
                    <Card initiallyExpanded={false}>
                        <CardHeader
                            title='数据监测平台介绍'
                            subtitle='作业盒子产品数据监控'
                            actAsExpander={true}
                            showExpandableButton={true} />

                        <CardText expandable={true}>
                            查看<a href='https://git.oschina.net/knowbox/data-monitoring-platform/wikis/%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97'>开发指南</a>  
                        </CardText>
                    </Card>
                </div>
                <div>
                    <div ref='markdownPanel' className={dashboardStyle.changelog}>
                        {/* markdonw 内容 */}
                    </div>
                </div>
            </div>
        );
    }
}

export default connect((state) => ({state}))(Dashboard);